<template>
  <!-- 会员等级分析 -->
  <div class="membershipLevel">
    <div class="head">
      <p>会员等级分析</p>
    </div>
    <div class="content" style="margin-top:40px">
      <el-table
      :highlight-current-row="false"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center','background':'transparent'}"
      :data="shipLevelData"
     >
      <el-table-column
        prop="name"
        label="会员等级"
        width="200">
      </el-table-column>
      <el-table-column
        prop="data"
        label="会员数量"
        width="200">
      </el-table-column>
      <el-table-column
        prop="percent"
        label="占比"
        width="500"
        >
        <template slot-scope="scope">
       <el-progress :percentage="scope.row.percent" :stroke-width="10"></el-progress>

  </template>

      </el-table-column>
      <el-table-column
        label="">
        <el-button type="primary">发优惠券</el-button>
      </el-table-column>
    </el-table>
    </div>
    <!-- <el-row>
        <el-row :span="4">
        <el-col :span="5">会员等级</el-col>
        <el-col :span="5">会员数量</el-col>
        <el-col :span="9">占比</el-col>
        <el-col :span="5"></el-col>
        </el-row>
        <el-row :span="4">
            <el-col :span="5">铂金会员</el-col>
        <el-col :span="5">2000</el-col>
        <el-col :span="9">
            <el-progress :percentage="50"></el-progress>
        </el-col>
        <el-col :span="5">
            <el-button type="primary">发优惠券</el-button>
        </el-col>

        </el-row>
        <el-row :span="4"></el-row>
        <el-row :span="4"></el-row>
    </el-row>  -->
  </div>
</template>

<script>
export default {
  data(){
    return {
shipLevelData:[
{
    name:"铂金会员",
    data:2000,
    percent:20
  },
  {
    name:"黄金会员",
    data:2000,
    percent:20
  },
  {
    name:"白银会员",
    data:2000,
    percent:20
  },
  {
    name:"普通会员",
    data:2000,
    percent:20
  },
  {
    name:"访客会员",
    data:2000,
    percent:20
  },
]
    }
  },
    methods: {
      format(percentage) {
        return percentage === 100 ? '满' : `${percentage}%`;
      }
    }
}
</script>

<style scoped>
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #ffffff;
  border-top: 1px solid #dfe6ec;
  font-size: 14px;
  
}
</style>

